<template>
  <div class="contact-form-container">
    <div class="form-header">
      <h2>联系我们</h2>
      <p>如果您有任何问题或需求，欢迎通过以下表单联系我们，我们将尽快回复您。</p>
    </div>
    
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="formRules" 
      label-position="top" 
      class="contact-form"
      @submit.prevent="submitForm"
    >
      <el-row :gutter="20">
        <el-col :span="12" :xs="24">
          <el-form-item label="您的姓名" prop="name">
            <el-input 
              v-model="formData.name" 
              placeholder="请输入您的姓名" 
              prefix-icon="el-icon-user"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12" :xs="24">
          <el-form-item label="您的邮箱" prop="email">
            <el-input 
              v-model="formData.email" 
              placeholder="请输入您的邮箱" 
              prefix-icon="el-icon-message"
              type="email"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12" :xs="24">
          <el-form-item label="您的电话" prop="phone">
            <el-input 
              v-model="formData.phone" 
              placeholder="请输入您的电话号码" 
              prefix-icon="el-icon-phone"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12" :xs="24">
          <el-form-item label="主题" prop="subject">
            <el-select 
              v-model="formData.subject" 
              placeholder="请选择咨询主题" 
              style="width: 100%"
            >
              <el-option label="产品咨询" value="产品咨询" />
              <el-option label="技术支持" value="技术支持" />
              <el-option label="合作洽谈" value="合作洽谈" />
              <el-option label="投诉建议" value="投诉建议" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="您的留言" prop="message">
        <el-input 
          v-model="formData.message" 
          type="textarea" 
          rows="6" 
          placeholder="请详细描述您的需求或问题，我们会尽快回复您"
        />
      </el-form-item>
      
      <el-form-item class="form-footer">
        <el-button 
          type="primary" 
          native-type="submit" 
          :loading="submitLoading"
          size="large"
          class="submit-btn"
        >
          提交留言
        </el-button>
      </el-form-item>
    </el-form>
    
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="30%"
      center
    >
      <div class="dialog-content">
        <i :class="dialogIcon" class="dialog-icon"></i>
        <p>{{ dialogMessage }}</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { contactApi } from '@/api';

export default {
  name: 'ContactForm',
  props: {
    successCallback: {
      type: Function,
      default: null
    }
  },
  setup(props) {
    // 表单引用
    const formRef = ref(null);
    
    // 表单数据
    const formData = reactive({
      name: '',
      email: '',
      phone: '',
      subject: '',
      message: ''
    });
    
    // 表单验证规则
    const formRules = {
      name: [
        { required: true, message: '请输入您的姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '姓名长度应在 2 到 20 个字符之间', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入您的邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入您的电话号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
      ],
      subject: [
        { required: true, message: '请选择咨询主题', trigger: 'change' }
      ],
      message: [
        { required: true, message: '请输入您的留言内容', trigger: 'blur' },
        { min: 10, max: 500, message: '留言内容应在 10 到 500 个字符之间', trigger: 'blur' }
      ]
    };
    
    // 提交状态
    const submitLoading = ref(false);
    
    // 对话框状态
    const dialogVisible = ref(false);
    const dialogTitle = ref('');
    const dialogMessage = ref('');
    const dialogIcon = ref('');
    
    // 表单提交
    const submitForm = () => {
      formRef.value.validate(async (valid) => {
        if (!valid) return;
        
        submitLoading.value = true;
        
        try {
          const res = await contactApi.submitContact(formData);
          
          if (res.data.ActionType === 'ok') {
            // 提交成功
            dialogTitle.value = '提交成功';
            dialogMessage.value = '感谢您的留言，我们将尽快与您联系！';
            dialogIcon.value = 'el-icon-success success-icon';
            dialogVisible.value = true;
            
            // 重置表单
            formRef.value.resetFields();
            
            // 回调函数
            if (props.successCallback) {
              props.successCallback();
            }
          } else {
            // 提交失败
            throw new Error(res.data.message || '提交失败');
          }
        } catch (error) {
          console.error('提交留言失败:', error);
          dialogTitle.value = '提交失败';
          dialogMessage.value = '很抱歉，提交失败，请稍后再试或直接联系我们。';
          dialogIcon.value = 'el-icon-error error-icon';
          dialogVisible.value = true;
        } finally {
          submitLoading.value = false;
        }
      });
    };
    
    return {
      formRef,
      formData,
      formRules,
      submitLoading,
      dialogVisible,
      dialogTitle,
      dialogMessage,
      dialogIcon,
      submitForm
    };
  }
};
</script>

<style lang="scss" scoped>
.contact-form-container {
  max-width: 800px;
  margin: 0 auto;
  
  .form-header {
    text-align: center;
    margin-bottom: 40px;
    
    h2 {
      font-size: 32px;
      font-weight: 700;
      color: var(--secondary-color);
      margin-bottom: 15px;
    }
    
    p {
      color: var(--text-light-color);
      font-size: 16px;
      max-width: 600px;
      margin: 0 auto;
    }
  }
  
  .contact-form {
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    @media (max-width: 768px) {
      padding: 25px 20px;
    }
    
    :deep(.el-form-item__label) {
      font-weight: 600;
      color: var(--secondary-color);
    }
    
    :deep(.el-input__inner) {
      padding-left: 40px;
    }
    
    :deep(.el-input__prefix) {
      left: 10px;
      color: var(--primary-color);
    }
    
    .form-footer {
      margin-top: 20px;
      text-align: center;
      
      .submit-btn {
        padding: 12px 40px;
        font-size: 16px;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
        }
      }
    }
  }
  
  .dialog-content {
    text-align: center;
    padding: 20px 0;
    
    .dialog-icon {
      font-size: 48px;
      margin-bottom: 15px;
      
      &.success-icon {
        color: #67c23a;
      }
      
      &.error-icon {
        color: #f56c6c;
      }
    }
    
    p {
      font-size: 16px;
      color: var(--text-color);
    }
  }
  
  .dialog-footer {
    text-align: center;
  }
}
</style> 